<template>
  <div>
    <h1 align="center">发布新课程</h1>
    <el-steps :active="2" finish-status="success">
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <br />
    <el-row>
      <el-col :span="22" :push="1">
        <el-collapse accordion>
          <el-collapse-item
            v-for="chapterVideoTitle in chapterVideoTitleList"
            :key="chapterVideoTitle.id"
          >
            <template slot="title">
              <div>
                <el-button
                  type="text"
                  @click="update_chapter(chapterVideoTitle.id)"
                  icon="el-icon-edit"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  slot="reference"
                  @click="delete_chapter(chapterVideoTitle.id)"
                ></el-button>
              </div>
              <div class="chapter_title">
                {{ chapterVideoTitle.title }}
              </div>
            </template>
            <!-- 一级内容 -->
            <el-row>
              <el-col :span="22" :push="1">
                <el-collapse accordion>
                  <el-collapse-item
                    v-for="VideoTitle in chapterVideoTitle.children"
                    :key="VideoTitle.id"
                  >
                    <template slot="title">
                      <div>
                        <el-button
                          type="text"
                          @click="
                            update_video(chapterVideoTitle.id, VideoTitle.id)
                          "
                          icon="el-icon-edit"
                        ></el-button>
                        <el-button
                          type="text"
                          icon="el-icon-delete"
                          slot="reference"
                          @click="delete_video(VideoTitle.id)"
                        ></el-button>
                      </div>
                      <div class="chapter_title">
                        {{ VideoTitle.title }}
                      </div>
                    </template>
                    <!-- 二级内容 -->
                    <div>二级内容</div>
                  </el-collapse-item>
                </el-collapse>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" :push="1">
                <!-- 小结添加 -->
                <el-button
                  type="text"
                  class="avatar-uploader"
                  @click="add_video(chapterVideoTitle.id)"
                  >+</el-button
                >
              </el-col>
            </el-row>
          </el-collapse-item>
          <!-- 章节添加 -->
          <el-row>
            <el-button
              type="text"
              class="avatar-uploader"
              @click="add_chapter()"
              >+</el-button
            >
          </el-row>
        </el-collapse>
      </el-col></el-row
    >
    <br />
    <div align="center">
      <el-button type="primary" @click="page_up">上一步</el-button>
      <el-button type="primary" @click="page_down">保存并下一步</el-button>
    </div>
    <!-- 章节弹框 -->
    <el-dialog title="章节" :visible.sync="chapterVisible">
      <el-form :model="chapter">
        <el-form-item label="章节名称" label-width="120px">
          <el-input v-model="chapter.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节排序" label-width="120px">
          <el-input-number
            v-model="chapter.sort"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chapterVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit_chapter">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 小结弹框 -->
    <el-dialog title="小结" :visible.sync="videoVisible">
      <el-form :model="video">
        <el-form-item label="小结名称" label-width="120px">
          <el-input v-model="video.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="小结排序" label-width="120px">
          <el-input-number
            v-model="video.sort"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否免费" label-width="120px">
          <el-radio v-model="video.isFree" :label="0">是</el-radio>
          <el-radio v-model="video.isFree" :label="1">否</el-radio>
        </el-form-item>
        <el-form-item label="上传视频" label-width="120px">
          <el-upload
            class="upload-demo"
            :action="BASE_API + '/vodService/fileVod/uploadVideo'"
            :on-success="handleSuccess"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="videoVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit_video">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import video from "@/api/edu/video";
import chapter from "@/api/edu/chapter";
import vod from "@/api/vod/vod";
export default {
  data() {
    return {
      fileList: [],
      BASE_API: process.env.VUE_APP_BASE_API,
      //小结表单
      videoVisible: false,
      video: {
        id: null,
        chapterId: null,
        courseId: null,
        isFree: null,
        size: 0,
        sort: 0,
        title: null,
        videoOriginalName: null,
        videoSourceId: null,
      },

      // 章节表单提交
      chapterVisible: false,
      chapter: {
        id: null,
        courseId: null,
        sort: 0,
        title: null,
      },
      //
      courseId: null,
      chapterVideoTitleList: [
        {
          id: null,
          title: null,
          children: [
            {
              id: null,
              title: null,
              videoSourceId: null,
              videoOriginalName: null,
            },
          ],
        },
      ],
    };
  },
  methods: {
    //章节小结名称列表，根据课程id
    get_c_v_title_list(id) {
      chapter.get_chapter_video_title_list(id).then((Response) => {
        this.chapterVideoTitleList = Response.data.chapterVideoTitleList;
      });
    },
    //返回基本信息编辑页
    page_up() {
      this.$router.push("/course/info/" + this.courseId);
    },
    //保存并下一页
    page_down() {
      this.$router.push("/course/publish/" + this.courseId);
      this.$message.success("保存成功！");
    },
    //=========================章节====================================
    //提交chapter
    submit_chapter() {
      if (this.chapter.id == null) {
        chapter.add_chapter(this.chapter).then((res) => {
          this.$message.success("添加成功！");
          this.get_c_v_title_list(this.courseId);
        });
      } else {
        chapter.update_chapter(this.chapter).then((res) => {
          this.$message.success("修改成功！");
          this.get_c_v_title_list(this.courseId);
        });
      }
      this.chapterVisible = false;
    },
    //添加章节
    add_chapter() {
      this.chapter.id = null;
      this.chapter.title = null;
      this.chapter.courseId = this.courseId;
      this.chapterVisible = true;
    },
    //修改弹出
    update_chapter(val) {
      for (var i = 0; i < this.chapterVideoTitleList.length; i++) {
        if (val == this.chapterVideoTitleList[i].id) {
          this.chapter.id = this.chapterVideoTitleList[i].id;
          this.chapter.title = this.chapterVideoTitleList[i].title;
        }
      }
      this.chapterVisible = true;
    },
    //删除
    delete_chapter(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          chapter.delete_chapter(id).then((res) => {
            this.$message.success("删除成功！");
            this.get_c_v_title_list(this.courseId);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // ===================================小结====================================
    //添加小结弹出
    add_video(chapterId) {
      this.video.isFree = 0;
      this.video.sort = 0;
      this.video.id = null;
      this.video.title = null;
      this.video.courseId = this.courseId;
      this.video.chapterId = chapterId;
      this.videoVisible = true;
      this.fileList = [];
    },
    //小结确认按钮
    submit_video() {
      this.fileList = [];
      if (this.video.id == null) {
        video.addVideo(this.video).then((res) => {
          this.$message.success("添加小结成功");
          this.get_c_v_title_list(this.courseId);
        });
      } else {
        video.updateVideo(this.video).then((res) => {
          this.$message.success("小结修改成功！");
          this.get_c_v_title_list(this.courseId);
        });
      }

      this.videoVisible = false;
    },
    //修改小结弹框
    update_video(chapterId, videoId) {
      this.fileList = [];
      for (var i = 0; i < this.chapterVideoTitleList.length; i++) {
        if (chapterId === this.chapterVideoTitleList[i].id) {
          for (
            var k = 0;
            k < this.chapterVideoTitleList[i].children.length;
            k++
          ) {
            if (videoId === this.chapterVideoTitleList[i].children[k].id) {
              this.video = this.chapterVideoTitleList[i].children[k];
              //视频
              var fil = {
                name: this.chapterVideoTitleList[i].children[k]
                  .videoOriginalName,
                url: this.chapterVideoTitleList[i].children[k].videoSourceId,
              };
              if(fil.url.replace(/(^s*)|(s*$)/g, "").length !=0){
                this.fileList[0] = fil;
              }
              
            }
          }
        }
      }
      this.videoVisible = true;
    },
    //删除课程小结
    delete_video(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          video.deleteVideo(id).then((res) => {
            this.$message.success("删除成功！");
            this.get_c_v_title_list(this.courseId);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //=========================视频===========================
    handleRemove(file, fileList) {
      this.$confirm(`确定移除 ${file.name}?`)
        .then(() => {
          vod.deleteVideo(fileList[0].url).then((res) => {
            this.$message.success("删除成功!");
            return true;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          return false;
        });
    },
    handlePreview(file) {
      console.log(file);
    },
    //上传文件之前
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    //删除之前
    beforeRemove(file, fileList) {
      if (file && file.status === "success") {
        return this.$confirm("此操作将永久删除该文件, 是否继续?", "系统提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
          .then(() => {
            var deleteUrl=file.url?file.url:file.response.data.videoId;
            vod.deleteVideo(deleteUrl).then((res) => {
              this.video.videoOriginalName = "";
              this.video.videoSourceId = "";
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除!",
            });
            reject(false);
          });
      }
    },
    //上传视频成功之后
    handleSuccess(Response, file, fileList) {
      this.video.videoSourceId = Response.data.videoId;
      this.video.videoOriginalName = file.name;
    },
  },
  mounted() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id;
      this.courseId = id;
      this.get_c_v_title_list(id);
    }
  },
};
</script>

<style scoped>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.chapter_title {
  display: inline-block;
  margin: auto;
}
</style>